import { useEffect, useRef } from "react";
import { Swiper } from "./swiper";
import { CardsComponents, useUserCard } from "../../landing/comp/components/GameCard";

const CardSwiper = () => {
  const { userBaseCards, getUserCards } = useUserCard()
  const swiperRef = useRef()
  useEffect(() => {
    getUserCards()
    swiperRef.current = new Swiper(".swiper-container", {
      pagination: ".swiper-dots",
      navigator: {
        prev: ".swiper-btn-prev",
        next: ".swiper-btn-next"
      },
      delay: 2000,
      autoPlay: true
    })
  }, [])

  return (
    <div className="swiper-container ">
      <ul className="swiper-wrap">
        {
          userBaseCards.map(card => (
            <li key={card.name} className={`p${card.position}`}>
              <img src={card.img} className={!card.num ? 'no-has' : ''} />
            </li>
          ))
        }
      </ul>
      <ul className="swiper-dots">
        <CardsComponents userCard={userBaseCards} onClick={() => {
          console.log(swiperRef.current)
        }} />
      </ul>

    </div>

  )
}

export default CardSwiper